{template header_static2.html}
{php extract(dr_get_form_post_value('zxly'))}
<body>
  <div id="warpper"> 
    {template header.html}
    <section>
      <div class="contain">
        <?php $neiyebanner=dr_site_value('neiyebanner');?>
        <?php if ($neiyebanner) { $key=0; foreach ($neiyebanner as $v) { ?>
        {if $key==0}
        <div class="nybanner" style="background-image:url({dr_get_file($v[2])});">
          <div class="ny-title">
            <h2 class="wow bounceInDown">{usu_fanyi($v[3], $language)}</h2>
            <h3 class="wow fadeInUp">{usu_fanyi($v[4], $language)}</h3>
          </div>
        </div>
        {/if}
        <?php  $key++; } } ?> 
        <style>
            .ny-title .bounceInDown{
                text-transform: uppercase;
                font-size: 50px;
                color: #fff;
                font-weight: 700;
            }
            .ny-title .fadeInUp{
                font-size: 50px;
                color: #fff;
                font-weight: 700;
            }
        </style>
        <div class="navigation">
          <div class="layout"> <a href='/' class=''>HOME</a>{dr_catpos($catid,'',true,' > <a href="[url]">[name]</a>')} </div>
        </div>
        <div class="news-warp">
          <div class="layout">
            <div class="product-container">
                <!-- 图片展示模块 -->
                <div class="product-gallery">
                  <div class="main-image">
                    <img id="mainImage" src="{dr_get_file($thumb)}" alt="{usu_fanyi($title, $language)}">
                  </div>
                  <div class="thumbnail-gallery">
                    <img class="thumbnail" src="{dr_get_file($thumb)}" alt="{usu_fanyi($title, $language)}" data-image="{dr_get_file($thumb)}">
                    <?php if ($liebiaotu) { $key=0;foreach ($liebiaotu as $c) { ?>
                    <img class="thumbnail" src="{dr_get_file($c.file)}" alt="{usu_fanyi($title, $language)}" data-image="{dr_get_file($c.file)}">
                    <?php $key++;} } ?>
                  </div>
                </div>
              
                <!-- 右侧的标题、参数和按钮 -->
                <div class="product-details">
                  <h2>{usu_fanyi($title, $language)}</h2>
                  <ul class="product-parameters">
                    {usu_fanyi($canshu, $language)}
                  </ul>
                  <button class="contact-btn"><a href="/contact">Contact</a></button>
                </div>
              </div>  
              <div class="pro-detail">
                <div class="detail-tit"> {usu_fanyi('Detail', $language)}</div>
                <div class="detail-con"> {usu_fanyi($content, $language)}</div>
              </div>
                <style>
                    @media (min-width:586px) {
                    .detail-tit{
                        margin-top: 40px;
                        padding:0 20px;
                        font-size: 18px;
                        font-weight: 600;
                        line-height: 40px;
                        height: 40px;
                        width: 100%;
                        color: #fff;
                        background-color: #242424;
                    }
                    .detail-con{
                        width: 100%;
                        padding: 20px;
                        background-color: #fff;
                        margin-bottom:30px ;
                    }
                        .layout {
                            width: 70%;
                            margin: 0 auto;
                        }
                        /* 容器和布局 */
                        .product-container {
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-start;
                            padding: 20px;
                            gap: 30px;
                        }

                        /* 图片部分 */
                        .product-gallery {
                            width: 50%;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                        }

                        .main-image img {
                            width: 100%;
                            height: auto;
                            margin-bottom: 20px;
                        }

                        .thumbnail-gallery {
                        overflow-y: hidden;
                        overflow-x: auto;
                        display: flex;
                        gap: 10px;
                        }

                        .thumbnail {
                        width: 100px;
                        cursor: pointer;
                        transition: transform 0.3s;
                        }

                        .thumbnail:hover {
                        transform: scale(1.1);
                        }

                        /* 右侧详情部分 */
                        .product-details {
                        width: 45%;
                        }

                        .product-details h2 {
                        font-size: 1.5rem;
                        margin-bottom: 15px;
                        }

                        .product-parameters {
                        list-style-type: none;
                        padding: 0;
                        margin-bottom: 20px;
                        }

                        .product-parameters li {
                        margin-bottom: 10px;
                        }

                        .contact-btn {
                        background-color: #d9534f;
                        color: white;
                        border: none;
                        padding: 10px 20px;
                        font-size: 1rem;
                        cursor: pointer;
                        border-radius: 5px;
                        }
                        a:hover {
                            color: #fff;
                            text-decoration: none;
                        }
                        .contact-btn:hover {
                        background-color: #c9302c;
                        }

                    }
                    @media (max-width:586px) {
                        .detail-tit{
                            margin-top: 40px;
                            padding:0 5%;
                            font-size: 18px;
                            font-weight: 600;
                            line-height: 40px;
                            height: 40px;
                            width: 90%;
                            color: #fff;
                            background-color: #242424;
                        }
                        .detail-con{
                            width: 90%;
                            padding:20px 5%;
                            background-color: #fff;
                            margin-bottom:30px ;
                        }
                        /* 容器和布局 */
                        .product-container {
                            flex-wrap: wrap;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        gap: 30px;
                        }

                        /* 图片部分 */
                        .product-gallery {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        }

                        .main-image img {
                        width: 100%;
                        height: auto;
                        margin-bottom: 20px;
                        }

                        .thumbnail-gallery {
                            overflow: auto;
                        display: flex;
                        gap: 10px;
                        }

                        .thumbnail {
                        width: 110px;
                        cursor: pointer;
                        transition: transform 0.3s;
                        }

                        .thumbnail:hover {
                        transform: scale(1.1);
                        }

                        /* 右侧详情部分 */
                        .product-details {
                        width: 100%;
                        }

                        .product-details h2 {
                        font-size: 1.5rem;
                        margin-bottom: 15px;
                        }

                        .product-parameters {
                        list-style-type: none;
                        padding: 0;
                        margin-bottom: 20px;
                        }

                        .product-parameters li {
                        margin-bottom: 10px;
                        }

                        .contact-btn {
                        background-color: #d9534f;
                        color: white;
                        border: none;
                        padding: 10px 20px;
                        font-size: 1rem;
                        cursor: pointer;
                        border-radius: 5px;
                        }

                        .contact-btn:hover {
                        background-color: #c9302c;
                        }
                    }
                </style>
                <script>
                    $(document).ready(function(){
                        $('.thumbnail').click(function(){
                            var newImage = $(this).attr('data-image');
                            $('#mainImage').attr('src', newImage);
                        });
                    });
                </script>            
          </div>
        </div>
        {template nav_contact.html}
      </div>
    </section>
    {template footer.html}
  </div>
</body>

</html>